<template>
	<view class="myTabBar"  :style="{height:`${search.top+search.height}px`}">
			<view :class="isShowBox ? 'myTabBarItem' : 'myTabBarItem myTabBarItemFalse'" v-for="(item,index) in myTabs" :key="index" @click.stop="goPath(item.pagePath)">
				<image class="myTabBarItemImg" :src="index == myTabsActive ? item.selectedIconPath : item.iconPath"></image>
				<view class="myTabBarItemText" :style="{color:myTabsActive == index ? '#99999' : '#A3AEC4'}">{{item.text}}</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:{
			search: {
				type: Object,
				default: {}
			},
			myTabsActive: {
				type: Number,
				default: 0
			},
			myTabs: {
				type: Array,
				default: []
			},
			isShowBox: {
				type: Boolean,
				default: true
			},
		},
		computed: {
			app() {
				return this.$store.state.appGlobalData;
			}
		},
		methods: {
			goPath(path){
				this.$emit('updataPath',path);
				
			}
		}
	}
</script>

<style scoped>
	.myTabBar{
		    display: flex;
		    position: fixed;
		    bottom: 0;
		    max-width: 750rpx;
		    width: 100%;
		    background-color: #fff;
		    box-sizing: border-box;
		    border-top: 1rpx solid #ccc;
			z-index: 999;
			overflow: hidden;
			padding-top: 23rpx;
	}
	.myTabBarItemFalse:nth-child(1){
		display: none;
	}
	
	 .myTabBarItemFalse:nth-child(3){
		display: none;
	}
	/*.myTabBarItemFalse:nth-child(4){
		display: none;
	} */
	.myTabBarItem{
		flex: 1;
		text-align: center;
		
	}
	.myTabBarItemImg{
		width: 56rpx;
		height: 56rpx;
	}
	.myTabBarItemText{
		font-size: 18rpx;
		font-weight: 600;
		font-family: 蘋方-簡;
	}
</style>
